<template>
  <a-drawer
    placement="right"
    title="选择设备"
    :width="1000"
    @close="handleClose"
    :visible="visible"
    :bodyStyle="{paddingBottom: '80px'}"
  >
    <a-form layout="inline" style="width:100%; margin-bottom: 10px;">
      <a-form-item>
        <a-select style="width: 200px;"
                  v-if="showProductOptions"
                  placeholder="设备所属产品"
                  allowClear
                  showSearch
                  :filterOption="(input,option)=>option.componentOptions.children[0].text.includes(input)"
                  v-model="filterProductId"
                  @change="handleSearchChange">
          <a-select-option v-for="p in productOptions"
                           :key="p.id"
                           :value="p.id">
            {{p.cnName}}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-input
          style="width: 200px;"
          placeholder="设备名称"
          v-model="key"
          @change="handleSearchChange"/>
      </a-form-item>
    </a-form>

    <a-table :dataSource="list"
             rowKey="id"
             :pagination="pagination"
             @change="handleTableChange">
      <a-table-column title="序号" dataIndex="idx" key="idx">
        <template slot-scope="value, row, index">
          {{index+1}}
        </template>
      </a-table-column>
      <a-table-column title="英文名" dataIndex="name" key="name">
        <template slot-scope="value, row, index">
          <highlight-text :text="value" :keyword="key"></highlight-text>
        </template>
      </a-table-column>
      <a-table-column title="中文名" dataIndex="cnName" key="cnName">
        <template slot-scope="value, row, index">
          <highlight-text :text="value" :keyword="key"></highlight-text>
        </template>
      </a-table-column>
      <a-table-column title="所属产品" dataIndex="productName" key="productName"/>
      <a-table-column title="设备类型" dataIndex="type" key="type">
        <template slot-scope="value, row, index">
          <a-tag :color="deviceTypeColorMap[parseInt(value)]">
            {{deviceTypeMap[parseInt(value)] || '-' }}
          </a-tag>
        </template>
      </a-table-column>
      <a-table-column title="归属部门" dataIndex="deptName" key="deptName"/>
      <a-table-column title="所有者" dataIndex="ownerNick" key="ownerNick"/>
      <a-table-column title="地址" dataIndex="address" key="address"/>
      <a-table-column title="版本" dataIndex="version" key="version"/>
      <a-table-column title="激活时间" dataIndex="actived" key="actived">
        <template slot-scope="value, row, index">
          {{value|moment}}
        </template>
      </a-table-column>
      <a-table-column title="注册时间" dataIndex="registered" key="registered">
        <template slot-scope="value, row, index">
          {{value|moment}}
        </template>
      </a-table-column>
      <a-table-column title="操作" key="action">
        <template slot-scope="value, row, index">
          <a-button type="primary" size="small" @click="handleDeviceSelected(row)">选中</a-button>
        </template>
      </a-table-column>
    </a-table>


  </a-drawer>
</template>

<script>

  import {mapGetters} from 'vuex'
  import {PageView} from '@/layouts'
  import {findProductOptions} from "@/api/product"
  import HeadInfo from '@/components/tools/HeadInfo'
  import {findPageDevices} from "@/api/device"
  import HighlightText from '@/components/HighlightText'
  import {debounce} from 'lodash'

  export default {

    components: {
      PageView,
      HeadInfo,
      HighlightText
    },
    props: {
      showProductOptions: {
        type: Boolean,
        default: () => false,
        required: false
      }
    },

    data() {
      return {
        visible: false,
        productOptions: [],
        filterProductId: undefined,
        key: '',
        list: [],
        pagination: {
          current: 1,
          size: '10',
          total: 0,
        }
      }
    },

    computed: {
      ...mapGetters(['productCategoryMap', 'deviceTypeMap', 'deviceTypeColorMap']),
      title() {
        return this.$route.meta.title
      }
    },

    created() {
      this.initProductOptions()
    },

    mounted() {
      this.handleSearchChange = debounce(this.handleSearchChange, 500)
    },

    methods: {
      open(filterProductId) {
        this.visible = true
        this.filterProductId = filterProductId
        this.queryData()
      },
      handleClose() {
        this.visible = false
      },
      initProductOptions() {
        findProductOptions().then(resp => {
          this.productOptions = resp.result.list
        })
      },
      handleTableChange(pagination) {
        this.pagination.current = pagination.current
        this.queryData()
      },
      queryData() {
        const current = this.pagination.current
        const size = this.pagination.size
        const filterProductId = this.filterProductId
        const key = this.key
        findPageDevices(current, size, filterProductId, key).then(resp => {
          this.list = resp.result.list
          this.pagination.total = resp.result.total
        })
      },
      handleSearchChange() {
        this.pagination.current = 1
        this.queryData()
      },
      handleDeviceSelected(row) {
        this.visible = false
        const product = this.productOptions.find(p=>p.id===row.productId)
        this.$emit('success', row,product)
      }
    }


  }
</script>

<style lang="less" scoped>

</style>
